웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
웹페이지를 만들때 CSS 불러와 적용하는 방법을 알아봅니다. 어떻게 하면 CSS를 적용할 수 있을까요?
일반적으로 css는 html 등의 템플릿 파일에서 사용하거나 아니면 외부에서 있는 파일을 불러와서 사용하는 두 가지 형태로 사용됩니다. 먼저 파일 내부에서 사용되는 경우는 다음과 같겠죠.
파일 내부에서 css style 사용하는 inline 방식
@ hello.html
간단하게 작성한 html 파일입니다. html 내부의 <head> 안에 <style> 태그를 사용한 뒤 css를 적용한 방법입니다. 이런 방식으로 css 스타일을 적용할 수는 있지만 일반적인 목적으로는 잘 사용되지 않는 방법입니다. 위와 같이 적용할 경우 코드가 길어지고 html 템플릿과 css 스타일이 혼재되어 있어 유지보수나 관리적 측면에서 좋지 않습니다. 시각적으로도 보기에 좋아보이지는 않네요 ~ 특히 css가 길어지면 길어질 수록 더 심해집니다.
! 외부 css를 적용하는 방법
그래서 별도로 css 파일을 만들고 불러오는 방법이 가장 많이 쓰이는 방법입니다. 단순히 파일로 분리하여 불러올 뿐 css 스타일에 차이나 변화는 없고 동일합니다.
아까 맨 처음에 보여드린 예제는 html 파일내에서 직접 코드를 작성하는 인라인(inline) 방식입니다. 하지만 아래의 방법은 외부 파일을 불러오는 방법으로 link 태그와 rel 속성하거나 또는 @import를 사용하는 방법 두 가지가 있습니다. 그럼 외부 파일을 불러오는 방법에 대하여 알아보기 위해 아래 예제를 봐주시기 바랍니다. 먼저 link 태그를 사용하는 방법입니다.
A. link 태그를 사용하는 방법
rel 속성의 값에 "stylesheet"를 적용하고 href의 값으로 파일의 위치를 입력하면 됩니다. 이 방법은 가장 많이 쓰이는 방법으로 다음에 나올 @import 방법보다 더 많이 쓰입니다.
@ disable 속성 알아보기
추가로 link 태그에 disable 속성을 사용하면 해당 파일을 적용할 것 인지의 여부를 결정할 수 있습니다. 만약 test.css 파일을 href에 설정하였으나 적용하지 않기 원하는 경우라면 아래와 같이 사용할 수 있습니다.
반대로 disabled 속성을 true로 설정할 경우 아래의 css를 사용하게 될 것입니다.
B. @import url을 사용하는 방법
이번에는 style 태그의 내부에 css 스타일이 아닌 외부 파일을 @import를 사용하여 적용하는 방법입니다. 문법은 아래와 같습니다.
@import url('파일 위치')
이처럼 style 내부에 @import url() 방식으로 사용하는 경우는 보통 스타일을 분리하여 사용하는 경우가 많습니다. 즉 몇 개의 파일로 구분하여 여러 개의 파일을 불러올 때 가장 효과적이라고 할 수 있습니다. 간단하게 예를들어 아래와 같이 사용할 수 있겠습니다. 물론 @import 개수에 제한은 딱히 없습니다.
위 코드는 reset, common, base로 css를 목적에 따라 나눈 뒤에 적용한 예제 코드입니다. 위와 같이 목적에 따라 파일 단위로 분리하여 import 하여 사용하면 관리하기 더 쉽다고 할 수 있겠죠!
여기까지 간단하게 css 파일을 불러와 적용하는 방법을 알아보았습니다.
# CSS 적용하는 방법, import
일반적으로 css는 html 등의 템플릿 파일에서 사용하거나 아니면 외부에서 있는 파일을 불러와서 사용하는 두 가지 형태로 사용됩니다. 먼저 파일 내부에서 사용되는 경우는 다음과 같겠죠.
파일 내부에서 css style 사용하는 inline 방식
@ hello.html
<html>
<head>
<style>
body {
color: red;
}
</style>
</head>
<body>
Hello!
</body>
</html>
<head>
<style>
body {
color: red;
}
</style>
</head>
<body>
Hello!
</body>
</html>
간단하게 작성한 html 파일입니다. html 내부의 <head> 안에 <style> 태그를 사용한 뒤 css를 적용한 방법입니다. 이런 방식으로 css 스타일을 적용할 수는 있지만 일반적인 목적으로는 잘 사용되지 않는 방법입니다. 위와 같이 적용할 경우 코드가 길어지고 html 템플릿과 css 스타일이 혼재되어 있어 유지보수나 관리적 측면에서 좋지 않습니다. 시각적으로도 보기에 좋아보이지는 않네요 ~ 특히 css가 길어지면 길어질 수록 더 심해집니다.
! 외부 css를 적용하는 방법
그래서 별도로 css 파일을 만들고 불러오는 방법이 가장 많이 쓰이는 방법입니다. 단순히 파일로 분리하여 불러올 뿐 css 스타일에 차이나 변화는 없고 동일합니다.아까 맨 처음에 보여드린 예제는 html 파일내에서 직접 코드를 작성하는 인라인(inline) 방식입니다. 하지만 아래의 방법은 외부 파일을 불러오는 방법으로 link 태그와 rel 속성하거나 또는 @import를 사용하는 방법 두 가지가 있습니다. 그럼 외부 파일을 불러오는 방법에 대하여 알아보기 위해 아래 예제를 봐주시기 바랍니다. 먼저 link 태그를 사용하는 방법입니다.
A. link 태그를 사용하는 방법
<link rel="stylesheet" href="test.css" />
rel 속성의 값에 "stylesheet"를 적용하고 href의 값으로 파일의 위치를 입력하면 됩니다. 이 방법은 가장 많이 쓰이는 방법으로 다음에 나올 @import 방법보다 더 많이 쓰입니다.
@ disable 속성 알아보기
추가로 link 태그에 disable 속성을 사용하면 해당 파일을 적용할 것 인지의 여부를 결정할 수 있습니다. 만약 test.css 파일을 href에 설정하였으나 적용하지 않기 원하는 경우라면 아래와 같이 사용할 수 있습니다.
<link rel="stylesheet" href="test.css" disabled="false" />
반대로 disabled 속성을 true로 설정할 경우 아래의 css를 사용하게 될 것입니다.
<link rel="stylesheet" href="test.css" disabled="true" />
B. @import url을 사용하는 방법
<style>
@import url("test.css");
</style>
@import url("test.css");
</style>
이번에는 style 태그의 내부에 css 스타일이 아닌 외부 파일을 @import를 사용하여 적용하는 방법입니다. 문법은 아래와 같습니다.
@import url('파일 위치')
이처럼 style 내부에 @import url() 방식으로 사용하는 경우는 보통 스타일을 분리하여 사용하는 경우가 많습니다. 즉 몇 개의 파일로 구분하여 여러 개의 파일을 불러올 때 가장 효과적이라고 할 수 있습니다. 간단하게 예를들어 아래와 같이 사용할 수 있겠습니다. 물론 @import 개수에 제한은 딱히 없습니다.
<style>
@import url("reset.css");
@import url("common.css");
@import url("base.css");
</style>
@import url("reset.css");
@import url("common.css");
@import url("base.css");
</style>
위 코드는 reset, common, base로 css를 목적에 따라 나눈 뒤에 적용한 예제 코드입니다. 위와 같이 목적에 따라 파일 단위로 분리하여 import 하여 사용하면 관리하기 더 쉽다고 할 수 있겠죠!
여기까지 간단하게 css 파일을 불러와 적용하는 방법을 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
